<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.css" />
    <link href="./assets/css/bootstrap-table.css" rel="stylesheet" />
    <link href="./mycss/tmsstyle.css" rel="stylesheet" />
    <link href="./myjs/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <!--<style>-->
        <!--.table-striped > tbody > tr:nth-child(2n+1) > td,-->
        <!--.table-striped > tbody > tr:nth-child(2n+1) > th {-->
            <!--background-color: #D1BA64;//此处是自己想用的颜色-->
        <!--}-->
        <!--.table-hover>tbody>tr:hover {-->
            <!--background-color: wheat!important;-->
        <!--}-->
    <!--</style>-->

    <script src="assets/js/jquery-2.0.3.min.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <script src="assets/js/bootstrap-table.js"></script>
    <script src="assets/js/bootstrap-table-zh-CN.js"></script>
    <script src="assets/js/json2.js"></script>
    <script type="text/javascript" src="myjs/tableutils.js"></script>
    <script src="myjs/utils.js"></script>
    <script src="layer/layer.js"></script>
    <script src="./myjs/bootstrap-datetimepicker.js" type="text/javascript"></script>
    <script src="./myjs/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
    <link href="./assets/css/daterangepicker.css" rel="stylesheet"/>
    <script type="text/javascript" src="assets/js/date-time/moment.min.js"></script>
    <script type="text/javascript" src="assets/js/date-time/daterangepicker.min.js"></script>
</head>
<body <!--style="background-color: #D1BA74"-->>
<div class="main-container" id="main-container">

    <div class="main-container-inner">

        <div class="main-content">

            <div class="page-content">
                <div style="padding:0px 15px;">
                    <!-- /.page-header -->
                    <div class="row">
                        <div class="col-sm-12" style="color: black">
                            <div class="panel panel-default">
                                <div class="panel-heading">查询条件</div>
                                <div class="panel-body">
                                    <form id="formSearch" class="form-horizontal">
                                        <div class="form-group" style="margin-top:15px">
                                            <label class="control-label col-sm-1" for="dname">姓名</label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" id="dname" name="dname" onkeydown="onKeyDown(event)"/>
                                            </div>
                                            <div class="col-sm-3" style="text-align:left;">
                                                <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div  id="BannerTable">
                                <div id="toolbar" class="btn-group toolbar">
                                    <button id="btn_add" type="button" class="btn btn-success">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button id="btn_edit" type="button" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                    </button>
                                    <button id="btn_delete" type="button" class="btn btn-danger">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                    </button>
                                </div>
                                <table></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.page-content -->
        </div>
        <!-- /.main-content -->
    </div>
    <!-- /.main-container-inner -->

</div>
</body>
<script>
    $(function() {

        var operateEvents = {
            'click #save': function (e, value, row, index) {
            },

            'click #delete': function (e, value, row, index) {
            },

        };


        var columns = [{
            field: 'checkStatus',
            checkbox: true
        },
            {
                field: 'id',
                visible: false
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'contentThings',
                title: '主要事情'
            }, {
                field: 'extender.show_startTime',
                title: '开始时间'
            }, {
                field: 'extender.show_endTime',
                title: '结束时间'
            }, {
                field: 'consumeTime',
                title: '消耗时间(分钟)'
            }, {
                field: 'extender.show_writeTime',
                title: '时间差'
            }, {
                field: 'operate',
                title: '操作',
                events: operateEvents,
                formatter: operateFormatter //自定义方法，添加操作按钮
            },
        ];
        var queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一至，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //当前页码
                name: $("#dname").val()
            };
            return temp;
        };
        function operateFormatter(value, row, index) { //赋予的参数
            return [
                '<button id="save" class="btn btn btn-link btn-xs">修改</button>',
                '<button id="delete" class="btn btn btn-link btn-xs">删除</button>'
            ].join('');
        }
        var detailView = function (index, row, $detail) {
            var htm = '';
            var $htm = $("<div>");
            htm += "<div class='col-sm-12'>";
            htm += "<table class='table table-bordered'>";
            // htm += "<tr><th colspan='12' class='center'  style='text-align: center'>具体配置</th></tr>";

            htm += "<tr>";
            htm += "<th>此事的初衷及实现</th>";
            htm += "<td>" + row.why + "</td>";
            htm += "</tr>";

            htm += "<tr>";
            htm += "<th>遇到的阻碍及解决方案</th>";
            htm += "<td>" + row.hinderSolve + "</td>";
            htm += "</tr>";

            htm += "<tr>";
            htm += "<th>做此事后获得了什么</th>";
            htm += "<td>" + row.gain + "</td>";
            htm += "</tr>";

            htm += "<tr>";
            htm += "<th>添加时间</th>";
            htm += "<td>" + row.extender.show_createTime + "</td>";
            htm += "</tr>";

            htm += "<tr>";
            htm += "<th>附加事情</th>";
            htm += "<td>" + row.additionalThings
                + "</td>";
            htm += "</tr>";

            htm += "</table>";
            htm += "</div>";

            htm += "</table>";
            htm += "</div>";

            $htm.append(htm);
            $detail.append($htm);
        };
        //1.初始化Table
        var oTable = new TableInit('#BannerTable',"./MDiary/searchByPage", columns,'GET','server',queryParams,detailView);
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
    });
    var ButtonInit = function() {
        var oInit = new Object();
        var postdata = {};
        oInit.Init = function() {
            //初始化页面上面的按钮事件
            $("#btn_query").click(function() {
                $("#BannerTable table").bootstrapTable('refresh');
            });
            $("#btn_add").click(function() {
                $.FormDialog({
                    form_url : './dairyAdd',
                    title : '新增信息',
                    // fullscreen : true
                });
            });
            $("#btn_edit").click(function() {
                var a = $("#BannerTable table").bootstrapTable('getSelections');
                if(a.length===1){
                    $.FormDialog({
                        form_url : './dairyUpdate',
                        id: a[0].id ,
                        title : '修改信息',
                        fullscreen : true,
                    });
                }else {
                    layer.msg("请选择一条信息进行修改");
                }
            });

            $("#btn_delete").click(function() {
            });
        };
        return oInit;
    };
    //回车搜索事件
    function onKeyDown(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==27){ // 按 Esc
            //要做的事情
        }
        if(e && e.keyCode==113){ // 按 F2
            //要做的事情
        }

        if(e && e.keyCode==13){ // enter 键
            $("#BannerTable table").bootstrapTable('refresh');
        }

    }

</script>

</html>